<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <my-alert></my-alert>
        <my-alert></my-alert>
    </div>
    <!-- 下面这个渲染不出来的，因为它已经在了app根据组件挂载的标签外部了!!! -->
    <my-alert></my-alert>

<script>
    const {createApp,ref} = Vue
    const app = createApp({})

    /*
        组件的配置对象与应用的配置对象用法基本一致
     */
    const alertComponent = {
        /* setup()中配置组件中所需要的数据和方法 */
        setup() {
            const msg = "警告提示框"
            const count = ref(1)
            const click = () => {
                alert(msg + "，点击了" + count.value++ + "次") // 弹出提示框
            }
            return {msg,count,click}
        },
        /* 组件的html模板 */
        template:`<div><button @click="click">点击</button></div>`
    }

    // 注册全局组件
    /*
         vue应用中定义组件时使用了component方法，这个方法接收两个参数：
            第一个参数是组件的标签名称，第二个参数是组件的配置对象
         组件是定义在app实例中的，在组织html框架结构时，my-alert组件只能在app挂载的标签内使用，在其外部使用是无效的
    */
    app.component("my-alert",alertComponent)
    app.mount("#app")

</script>
</body>
</html>